<template>
  <div>
    <el-form>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item>
            <el-input v-model="text" placeholder="请输入地址全称，例：辽宁省"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="search()">
              查询
            </el-button>
            <!-- <el-button type="primary">
              添加
            </el-button> -->
            <el-button type="danger">
              批量删除
            </el-button>
            <el-button type="primary" @click="excel()">
              导入excel
            </el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>


    <div class="custom-tree-container">
      <div class="block">
          <el-tree
          :data="tableData"
          show-checkbox
          node-key="id"
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <!-- default-expand-all -->
            <span>{{ data.name }}</span>
              <!-- <span>{{ node.label }}</span> -->
              <span>
                <el-button
                    type="primary"
                    size="mini"
                    @click="edit(data)"
                    style="font-size: 9px;">
                    编辑
                </el-button>
                <el-button
                    type="primary"
                    size="mini"
                    @click="() => append(data)"
                    style="font-size: 9px;">
                    添加
                </el-button>
                <el-button
                    type="danger"
                    size="mini"
                    @click="() => remove(node, data)"
                    style="font-size: 9px;">
                    删除
                </el-button>
              </span>
          </span>
          </el-tree>
      </div>
    </div>
    
    <Add v-if="isShowAreaAdd" :isShowAreaAdd="isShowAreaAdd"
            @dialogClose="dialogClose" :addId="addId"></Add>
    <Edit v-if="isShowAreaEdit" :isShowAreaEdit="isShowAreaEdit"
        @dialogClose="dialogClose" :tableData="editProps"></Edit>
    <Excel v-if="isShowExcel" :isShowExcel="isShowExcel" 
        @dialogClose="dialogClose"></Excel>
  </div>
    
  </template>
  
  <script>
  import Add from './areaAdd.vue';
  import Edit from './areaEdit.vue';
  import Excel from './excel.vue';
  import { getAll,getDataByName,delData } from '@/api/systemAdministrator/administrativeArea';

  let id = 100000;
  
    export default {
      name: "administratorArea",
      components: {
        Add,
        Edit,
        Excel
      },
      data() {
        return {
          // data: JSON.parse(JSON.stringify(data)),
          tableData: [
            {
              id: 100000,
              parentId: 0,
              name: '中国',
              children: [],
            },
          ],
          text: '',
          isShowAreaAdd: false,
          isShowAreaEdit: false,
          isShowExcel: false,
          editProps: [],
          addId: 0,
        }
      },
  
      methods: {
        append(data) {
          this.addId = data.id;
          this.isShowAreaAdd = true;
          const newChild = { id: id++, label: 'test', children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        },
  
        remove(node, data) {
          this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
              const parent = node.parent;
              const children = parent.data.children || parent.data;
              const index = children.findIndex(d => d.id === data.id);
              children.splice(index, 1);
              delData(data.id).then((res) => {
                if(res){
                  console.log(data);
                  console.log(res.msg);
                }
              })
            });
        },
  
        // renderContent(h, { node, data, store }) {
        //   return (
        //     <span class="custom-tree-node">
        //       <span>{node.label}</span>
        //       <span>
        //         <el-button size="mini" type="primary" on-click={ () => this.edit(data) } style="font-size: 9px;">编辑</el-button>
        //         <el-button size="mini" type="primary" on-click={ () => this.append(data) } style="font-size: 9px;">添加</el-button>
        //         <el-button size="mini" type="danger" on-click={ () => this.remove(node, data) } style="font-size: 9px;">删除</el-button>
        //       </span>
        //     </span>);
        // },
        dialogClose () {
            this.isShowAreaAdd = false;
            this.isShowAreaEdit = false;
            this.isShowExcel = false;
            this.getList();
        },
        getList(){
          getAll().then((res) => {
            if(res){
              console.log(res.msg);
              // console.log(res.data);
              this.tableData = res.data;
            }
          })
        },
        search(){
          console.log(this.text);
          getDataByName(this.text).then((res) => {
            if(res){
              console.log(res.msg);
              console.log(res.data);
              this.tableData = res.data;
            }
          })
        },
        edit(data){
          this.isShowAreaEdit = true;
          this.editProps = data;
        },
        excel(){
          this.isShowExcel = true;
        }
      },
      mounted(){
        this.getList();
      }
    };
  </script>
  
  <style lang="less" scoped>
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  </style>